<template>
	<view>
		<tn-list-view :card="true" unlined="all">
			<block v-for="(item, index) in list" :key="index">
				<tn-list-cell :arrow="false">
					<view class="row">
						<view class="value tn-text-bold tn-text-lg">
							NO.{{index+1}}
						</view>
					</view>
					<view class="row">
						<view class="value">
							打印机编号:{{item.sn}}
						</view>
					</view>
					<view class="row">
						<view class="value">
							打印机识别码:{{item.key}}
						</view>
					</view>
					<view class="row">
						<view class="value">
							备注:{{item.name}}
						</view>
					</view>
					<view class="status tn-bg-green">
						<view class="tn-icon-bookmark-fill"></view>
						{{ item.state}}
					</view>
					<tn-button width="50%" backgroundColor="#2074d4" fontColor="#ffffff" @click="edit(item)"
						shape="round">编辑</tn-button>
					<tn-button width="50%" backgroundColor="#ff5500" fontColor="#ffffff" @click="del(item)"
						shape="round">删除</tn-button>
				</tn-list-cell>
			</block>
		</tn-list-view>
		<tn-popup v-model="show" mode="bottom">
			<view class="tn-padding tn-margin-bottom-sm">
				<tn-form :labelWidth="200" :model="form" ref="uform">
					<tn-form-item label="打印机编号" prop="sn">
						<tn-input v-model="form.sn" />
					</tn-form-item>
					<tn-form-item label="打印机识别码" prop="key">
						<tn-input v-model="form.key" />
					</tn-form-item>
					<tn-form-item label="备注名称" prop="remark">
						<tn-input v-model="form.remark" />
					</tn-form-item>
				</tn-form>
				<tn-button width="100%" height="40px" backgroundColor="#2074d4" fontColor="#ffffff"
					@click="submit">提交</tn-button>
			</view>
		</tn-popup>

		<tn-empty v-if="list.length<1" class="error" icon="/static/error/common.png" mode="data"></tn-empty>
		<view class='tn-tabbar-height'></view>
		<view class="bottom-btn">
			<tn-button width="100%" height="40px" backgroundColor="#2074d4" fontColor="#ffffff"
				@click="add">添加打印机</tn-button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		name: 'PRINT_LIST',
		components: {},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		data() {
			return {
				title: '打印机列表',
				show: false,
				list: [],
				form: {
					sn: '932609949',
					key: 'H3nIrxfR',
					remark: '备注',
				},
				is_edit: false,
				page: 1,
				rules: {
					sn: [{
						required: true,
						message: '请输入打印机编号',
						trigger: ['change', 'blur'],
					}],
					key: [{
						required: true,
						message: '请输入打印机识别码',
						trigger: ['change', 'blur'],
					}],
					remark: [{
						required: true,
						message: '请输入打印机识别码',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		onLoad(options) {
			this.getList()
		},
		onReachBottom() {
			this.getList();
		},
		onReady() {},
		onShow() {
			let t = this;
			if (!t.userinfo) t.$user.getInfo()
		},
		methods: {
			add() {
				let that = this;
				that.show = true;
				that.is_edit = false;
				setTimeout(() => {
					that.$refs.uform.setRules(that.rules);
				}, 500)
			},
			edit(item) {
				let that = this;
				that.show = true;
				that.is_edit = true;
				setTimeout(() => {
					that.$refs.uform.setRules(that.rules);
				}, 500)
				that.form = {
					...item
				}
			},
			del(item) {
				let that = this;
				uni.showModal({
					title: "提示",
					content: '确认删除吗',
					success: function(res) {
						if (res.confirm) {
							that.$request({
								url: that.$api.print.del,
								data: {
									snlist: [item]
								},
								method: "POST",
							}).then(response => {
								that.show = false
								that.getList(1)
							}).catch((msg) => {
								that.$t.message.toast(msg);
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			submit() {
				let that = this;
				this.$refs.uform.validate(valid => {
					if (valid) {
						console.log(123)
						if (that.is_edit) {
							that.GoEdit()
						} else {
							that.GoAdd()
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			GoAdd() {
				let that = this;
				that.$request({
					url: that.$api.print.add,
					data: {
						records: [that.form]
					},
					method: "POST",
				}).then(response => {
					that.show = false
					that.getList()
				}).catch((msg) => {
					that.$t.message.toast(msg);
				});
			},
			GoEdit() {
				let that = this;
				that.$request({
					url: that.$api.print.edit,
					data: {
						...that.form,
						name: that.form.remark
					},
					method: "POST",
				}).then(response => {
					that.show = false
					that.getList(1)
				}).catch((msg) => {
					that.$t.message.toast(msg);
				});
			},

			getList(is_flash = false) {
				let t = this;
				t.$t.message.loading('加载中');
				if (is_flash) t.page = 1;
				t.$request({
					url: t.$api.print.list,
					data: {
						limit_page: t.page,
						limit_count: 20,
					}
				}).then(response => {
					t.$t.message.closeLoading();
					if (response.code === 0) {
						if (t.page !== 1) {
							t.list = t.list.concat(response.list);
						} else {
							t.list = response.list;
						}
						t.$storage.setStorageSync('printlist', t.list)
						t.page = response.list.length ? t.page + 1 : t.page;
					}
				}).catch((msg) => {
					t.$t.message.toast(msg);
					t.$t.message.closeLoading();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-btn {
		position: fixed;
		width: 100%;
		bottom: 50px;
		padding: 20px;
	}

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10upx 0;
	}

	.value {
		min-width: 50%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.status {

		display: flex;
		min-width: 150upx;
		align-items: center;
		justify-content: center;
		color: #fff;
		position: absolute;
		right: 0;
		top: 20upx;
		padding: 10upx 0;
		border-top-left-radius: 25upx;
		border-bottom-left-radius: 25upx;
		font-size: 11pt;
		// transform: rotate(45deg);
		// clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
	}
</style>